<template>
  <div>
    <div
      v-for="(item, index) in list"
      :key="index"
      class="todo-item"
      :class="{ 'completed-item': item.completed }"
    >
      <el-checkbox v-model="item.completed" />
      <span style="margin: 0px 8px">{{ item.title }}</span>
      <el-button
        style="margin-left: auto"
        type="danger"
        :icon="Remove"
        circle
        @click="remove(item.id)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Remove } from '@element-plus/icons-vue'
import { useTodoCtx } from '../useTodo'

const { list, remove } = useTodoCtx()!
</script>

<style scoped>
.todo-item {
  display: flex;
  height: 28px;
  align-items: center;
  margin: 8px 0px;
}

.completed-item span {
  color: #b1b3b8;
  text-decoration: line-through solid;
}
</style>
